<template>
    <div class="action-wrapper">
        <template v-for="(op, index) in showOpList">
            <Poptip
                v-if="getTooltip(op)"
                :key="op.key"
                confirm
                ok-text="确定"
                cancel-text="取消"
                size="large"
                :title="getTitle(op)"
                transfer
                word-wrap
                width="200"
                :disabled="getDisStatus(op)"
                @on-ok="handleClick($event,op)"
            >
                <span
                    :class="{
                        delete: op.type === 'delete',
                        pointer: !getDisStatus(op),
                        'not-allowed':getDisStatus(op)
                    }"
                    :style="{
                        color:
                         !getDisStatus(op) && op.setColor ? op.setColor(row) : ''
                    }"
                    >{{ getTxt(op) }}</span
                >
            </Poptip>
            <Dropdown
                v-else-if="op.dropdown"
                transfer
                :key="op.txt"
                @on-click="
                    (name) => {
                        return handleClick('',op, name);
                    }
                "
            >
                <span
                    :class="{
                        pointer: !getDisStatus(op),
                        'not-allowed': getDisStatus(op)
                    }"
                >
                    {{ op.txt }}
                    <Icon type="ios-arrow-down"></Icon>
                </span>
                <DropdownMenu slot="list">
                    <DropdownItem
                        class="table-dropdown"
                        style="color:var(--main-color)"
                        v-for="item in getDropdownList(op)"
                        :key="item.name"
                        :name="item.name"
                        :disabled="getDisStatus(op)"
                        >{{ item.title }}</DropdownItem
                    >
                </DropdownMenu>
            </Dropdown>
            <span
                v-else
                :key="op.key"
                :style="{
                    color: !getDisStatus(op) && op.setColor ? op.setColor(row) : ''
                }"
                :class="{
                    delete: op.type === 'delete',
                    pointer: !getDisStatus(op),
                    'not-allowed':getDisStatus(op)
                }"
                @click="(e) => handleClick(e,op)"
                >{{ getTxt(op) }}</span
            >
            <Divider
                v-if="index < showOpList.length - 1"
                :key="index"
                type="vertical"
                style="background:hsla(0,0%,100%,.12)"
            ></Divider>
        </template>
    </div>
</template>
<script>
export default {
    name: 'Action',
    props: {
        column: {
            type: Object,
            default: () => {}
        },
        row: {
            type: Object,
            default: () => {}
        },
        index: Number
    },
    inject:['tableRoot'],
    computed: {
        showOpList() {
            return this.column.opList && this.column.opList.filter((op) => typeof op.show === 'function' ?  op.show(this.row) : !op.show);
        }
    },
    watch:{
        showOpList(val){
            // console.log(this.tableRoot.$refs.t)
            // let width = val.map(item => this.getTxt(item)).reduce((arr,current,index) => {
            //     return [...arr,current]
            // },[]).join('').length * 12 + (val.length * 9)
            // this.column.width = ''
            // this.$set(this.tableRoot.columnsWidth[Object.keys(this.tableRoot.columnsWidth).length - 1],width,width)
            // // this.tableRoot.$parent.columnsWidth[Object.keys(this.tableRoot.columnsWidth).length - 1].width = width
            // console.log(this.tableRoot.$parent.useColumns)
            // this.tableRoot.$parent.useColumns[Object.keys(this.tableRoot.columnsWidth).length - 1].width = width
        }
    },
    methods: {
        getDisStatus(op) {
            if (op.disabled && typeof op.disabled === 'function') {
                return op.disabled(this.row);
            } else {
                return op.disabled
            }
        },
        getDropdownList(op) {
            if (Array.isArray(op.dropdownList)) {
                return op.dropdownList;
            } else {
                return typeof op.dropdownList === 'function' ? op.dropdownList(this.row) : [];
            }
        },
        getCurrent(op) {
            if (typeof op.current === 'function') {
                return op.current(this.row);
            } else {
                return op.current ? op.current : this.getDropdownList(op)[0];
            }
        },
        getTxt(op) {
            if (typeof op.txt === 'function') {
                return op.txt(this.row);
            } else {
                return op.txt;
            }
        },
        getTitle(op){
            if (typeof op.title === 'function') {
                return op.title(this.row);
            } else {
                return op.title;
            }
        },
        getTooltip(op) {
            if (typeof op.tooltip === 'function') {
                return op.tooltip(this.row);
            } else {
                return op.tooltip;
            }
        },
        handleClick(e, op, name) {
            if (!this.getDisStatus(op)) {
                if(name){
                    op.fun ? op.fun(this.row,name,e) : op.on.click(this.row,name,e);
                }else{
                    op.fun ? op.fun(this.row,e) : op.on.click(this.row,e);
                }
            }
        }
    }
};
</script>
<style scoped>
.pointer {
    cursor: pointer;
    color: var(--operation-useable);
}
.not-allowed {
    cursor: not-allowed;
    color: var(--operation-unuseable);
}
.pointer.delete {
    color: var(--operation-del);
}
.table-dropdown:hover {
    background: var(--select-content-bgcolor);
}
.action-wrapper /deep/ .ivu-divider, .ivu-divider-vertical {
    margin:0 4px;
}
</style>
